<template>
    <div class="View">
        <!-- tab切换菜单 -->
        <el-tabs v-model="activeName" class="bh-tab">
            <el-tab-pane label="ﾗｲﾝｲﾝﾃﾞｯｸｽ" name="first">
            </el-tab-pane>
        </el-tabs>
        <div class="all-content-warrper">
            <!-- 打印 、 编辑、 装置名称那栏目 坑坑坑~~~~~~~~~~ -->
            <div class="title-view">
                <div class="top-btn-view">
                    <div class="bottom">
                        <div class="bottom-left-view">
                            <div class="b-input">
                                <div class="b-input-label">
                                    {{ $t("message.bhView.label.Plant") }}
                                </div>
                                <!-- 装置名称 -->
                                <el-input :value="$store.state.plantName" class="selectInput" readonly></el-input>
                            </div>
                            <div class="b-input">
                                <div class="b-input-label">
                                    ライン№：
                                </div>
                                <!-- macName -->
                                <el-input v-model="tableSelectRow.lineNo" clearable
                                    :placeholder="$t('message.bhView.label.placeholder')" class="selectInput"
                                    readonly></el-input>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="warp">
                <div class="tips">
                    <div class="b-input-label">
                        {{ $t("message.bhView.label.Plant") }}
                    </div>
                    <!-- 装置名称 -->
                    <el-select v-model="valuePlant" :placeholder="$t('message.bhView.label.placeholderSearch')"
                        class="form-ipt" @change="changePlantFlg = true, GetLineIndexListApi()">
                        <el-option v-for="item in plantOptions" :key="item.pltCode" :label="item.pltName"
                            :value="item.pltCode"></el-option>
                    </el-select>

                    <!-- 刷新 -->
                    <el-tooltip class="item" effect="dark" :content="$t('message.public.refresh')" placement="top">
                        <div class="refresh" style="margin-left: 24px;" @click="refreshFn">
                            <i class="iconfont">&#xe81f;</i>
                            <!-- <span>刷新</span> -->
                        </div>
                    </el-tooltip>

                    <el-button style="margin-left: 24px;" type="primary" size="mini"
                        :disabled="tableSelectRow.mac_code == 0" @click="showRetrievalBtn1">ラインリスト編集</el-button>
                    <el-button style="margin-left: 24px;" :type="!isDialog2Active2 ? 'primary' : ''" size="mini"
                        @click="showRetrievalBtn2" :style="{
                            background: isDialog2Active2 ? '#bc000f' : '', color: isDialog2Active2 ? '#fff' : '',
                            borderColor: isDialog2Active2 ? '#bc000f' : ''
                        }">抽出条件設定</el-button>
                    <el-button style="margin-left: 24px;" type="defalut" size="mini" @click="clearFn">Clear</el-button>
                    <el-button style="margin-left: 24px;" type="primary" size="mini"
                        :disabled="tableSelectRow.mac_code == 0 || !tableSelectRow.lCCodName.trim()"
                        @click="isShowTab = 'tab3'">ラインクラスマスター表示</el-button>
                    <el-button style="margin-left: 24px;" type="primary" size="mini"
                        :disabled="tableSelectRow.mac_code == 0" @click="isShowTab = 'tab4'">関連スプール図</el-button>
                </div>

                <div class="table-view">
                    <AContentTable ref="AContentTableRef" :tableHeight="tableHeight" :prposTabelData="prposTabelData"
                        :loading="loading" @getMSTabelRow="getMSTabelRow" :pageDes="pageDes"
                        @GetLineIndexListApi="GetLineIndexListApi">
                    </AContentTable>
                </div>
            </div>
        </div>

        <!-- 111 -->
        <Dialog1 ref="Dialog1Ref" class="plan-c1" @showRetrievalBtn1="showRetrievalBtn1"
            :showRetrievalFlg1="showRetrievalFlg1" @GetLineIndexListApi="GetLineIndexListApi"
            :tableSelectRow="tableSelectRow" @chenOldParams="chenOldParams">
        </Dialog1>

        <!-- 222 -->
        <Dialog2 ref="Dialog2Ref" class="plan-c2" @showRetrievalBtn2="showRetrievalBtn2"
            @GetLineIndexListApi="GetLineIndexListApi" @isDialog2ActiveFn2="isDialog2ActiveFn2"></Dialog2>

        <!-- 333 -->
        <EnDialog v-if="'tab3' == isShowTab" @CloseTerm="isShowTab = null" :MacCode="tableSelectRow.mac_code"
            :Code="null" footer="footer2">
        </EnDialog>

        <!-- 444 -->
        <Dialog4 v-if="'tab4' == isShowTab" @CloseTerm="isShowTab = null" :MacCode="tableSelectRow.mac_code">
        </Dialog4>
    </div>
</template>

<script>
import { getPlant, GetLineIndexList } from "@/api/api";
import $ from "jquery";
import eventBus from "@/eventBus/bus";
import { getLocalStorage } from "@/utils/storage";
import AContentTable from './AContentTable';
import Dialog1 from './btnDialog/Dialog1';
import Dialog2 from './btnDialog/Dialog2';
import EnDialog from "@/components/Customize/Customer003/views/CustomerAView/btnDialog/EnDialog.vue"
import Dialog4 from "@/components/Customize/Customer003/views/CustomerAView/btnDialog/Dialog4.vue"

import { showLoading, hideLoading } from "@/utils/loading";

// 导出模块
export default {
    // 模块名字
    name: "CustomerAView",
    // 注册组件
    components: {
        AContentTable, Dialog1, Dialog2, EnDialog, Dialog4
    },
    // 模块数据
    data() {
        //数据
        return {
            userData: getLocalStorage('userData'),
            activeName: "first",

            valuePlant: "",
            tempValuePlant: "",
            plantOptions: [],
            changePlantFlg: false,

            tableHeight: 278,
            prposTabelData: [],
            loading: false,
            tableSelectRow: {
                lineNo: '',
                mac_code: 0
            },

            showRetrievalFlg1: false,
            showRetrievalFlg2: false,
            pageDes: '',

            isDialog2Active2: false,
            isShowTab: '',

        };
    },

    computed: {},


    // 监听指定值，只有指定值变化，才会触发
    watch: {

    },
    // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
    methods: {
        clearFn() {

            eventBus.$emit('getDialog1Current_EventBus');

            let Fn = () => {
                this.$refs.Dialog2Ref.clearFn(true)
            }
            this.$store.commit("changeIsCurrentFn", Fn);
            if (this.$store.state.isCurrentNext) {
                Fn();
            } else {
                eventBus.$emit('saveFnDialog1Current_EventBus', true);///	ﾗｲﾝｲﾝﾃﾞｯｸｽ保存弹框
            }

        },
        // isDialog2ActiveFn1(e) {
        //     this.isDialog2Active1 = e;
        // },
        //右侧筛选
        showRetrievalBtn1(flg) {


            this.showRetrievalFlg2 = false;
            this.showRoHiddenRetrieva2(this.showRetrievalFlg2);
            if (flg == 'hidden') {
                this.showRetrievalFlg1 = false;
                this.showRoHiddenRetrieva1(this.showRetrievalFlg1);
                return
            }
            this.showRetrievalFlg1 = !this.showRetrievalFlg1;
            this.showRoHiddenRetrieva1(this.showRetrievalFlg1);
        },
        showRoHiddenRetrieva1(flg) {

            //	ﾗｲﾝｲﾝﾃﾞｯｸｽ编辑页是否更改
            //  true未更改
            if (!flg) {
                eventBus.$emit('getDialog1Current_EventBus');
            }

            let Fn = () => {
                console.log('showRoHiddenRetrieva1', flg);
                if (flg) {
                    $('.plan-c1').css('right', '10px');
                    // 通知第一次显示
                    this.$refs.Dialog1Ref.GetLineIndexCondComboxApi(this.tableSelectRow);
                } else {
                    $('.plan-c1').css('right', '-560px');
                }
            }

            this.$store.commit("changeIsCurrentFn", Fn);

            if (this.$store.state.isCurrentNext) {
                Fn();
            } else {
                eventBus.$emit('saveFnDialog1Current_EventBus', true);///	ﾗｲﾝｲﾝﾃﾞｯｸｽ保存弹框
            }

        },

        isDialog2ActiveFn2(e) {
            this.isDialog2Active2 = e;
        },
        //右侧筛选
        showRetrievalBtn2(flg) {
            this.showRetrievalFlg1 = false;
            this.showRoHiddenRetrieva1(this.showRetrievalFlg1);


            let Fn = () => {
                if (flg == 'hidden') {
                    this.showRetrievalFlg2 = false;
                    this.showRoHiddenRetrieva2(this.showRetrievalFlg2);
                    return
                }
                this.showRetrievalFlg2 = !this.showRetrievalFlg2;
                this.showRoHiddenRetrieva2(this.showRetrievalFlg2);
            }

            this.$store.commit("changeIsCurrentFn", Fn);

            if (this.$store.state.isCurrentNext) {
                Fn();
            }


        },
        showRoHiddenRetrieva2(flg) {
            if (flg) {
                $('.plan-c2').css('right', '10px');
                // 通知第一次显示
                this.$refs.Dialog2Ref.GetLineIndexCondComboxApi();
            } else {
                $('.plan-c2').css('right', '-560px');
            }
        },

        //获取右上表格某一行数据
        getMSTabelRow(row) {
            console.log(row);

            this.tableSelectRow = row;
            // this.showRetrievalBtn1('hidden');

            console.log(1111);

            this.$refs.Dialog1Ref.GetLineIndexCondComboxApi(this.tableSelectRow);
        },

        // 获取装置 1   1000    第一次加载  获取list
        getPlantApi(pageIndex, pageSize, isCreated = false) {
            let dataJson = {
                pltCode: 0,
                platName: "",
                pageIndex: pageIndex,
                pageSize: pageSize,
            };
            getPlant(dataJson).then((res) => {
                this.plantOptions = [];
                if (res.data.code != 0) {
                    return;
                }
                this.plantOptions = res.data.data;
                //  如果有选择过装置 ---添加为记忆选项
                if (this.$store.state.pltCode && isCreated) {
                    this.valuePlant = this.$store.state.pltCode;
                } else {
                    if (!this.valuePlant) {
                        this.valuePlant = this.plantOptions[0].pltCode;
                        this.$store.commit("changePltCode", this.valuePlant);
                    }
                }
                // 更新保存的装置name
                this.plantOptions.forEach((Item) => {
                    if (Item.pltCode == this.valuePlant) {
                        let valuePlant = Item.pltName;
                        this.$store.commit("changePlantName", valuePlant);
                    }
                });

                this.GetLineIndexListApi();
            });
        },
        chenOldParams() {
            this.valuePlant = this.tempValuePlant;
        },
        refreshFn() {
            //	ﾗｲﾝｲﾝﾃﾞｯｸｽ编辑页是否更改
            //  true未更改
            eventBus.$emit('getDialog1Current_EventBus');

            let Fn = () => {
                this.GetLineIndexListApi(this.tableSelectRow.lineNo);
            }

            this.$store.commit("changeIsCurrentFn", Fn);

            if (this.$store.state.isCurrentNext) {
                Fn();
            } else {
                eventBus.$emit('saveFnDialog1Current_EventBus');///	ﾗｲﾝｲﾝﾃﾞｯｸｽ保存弹框
            }
        },
        // 获取数据
        async GetLineIndexListApi(name) {
            // this.showRetrievalBtn1('hidden');
            // this.showRetrievalBtn2('hidden');

            //  true未更改
            if (this.changePlantFlg) {
                eventBus.$emit('getDialog1Current_EventBus');
            }

            let Fn = async () => {
                this.tempValuePlant = this.valuePlant;
                this.loading = true;
                this.tableSelectRow = {
                    lineNo: '',
                    mac_code: 0
                }

                // 更新保存的装置name
                this.plantOptions.forEach((Item) => {
                    if (Item.pltCode == this.valuePlant) {
                        let valuePlant = Item.pltName;
                        this.$store.commit("changePlantName", valuePlant);
                        this.$store.commit("changePltCode", this.valuePlant);
                    }
                });

                let dataJosn = {
                    PltCode: this.valuePlant,
                };
                let res = await GetLineIndexList(dataJosn);
                this.loading = false;
                if (!res || res.data.code != 0) {
                    // this.tableSelectRow = {};
                    // this.$refs.AContentTableRef.setCurrentFn({}, 0);
                    this.$refs.Dialog1Ref.GetLineIndexCondComboxApi({});
                    // return
                }
                this.prposTabelData = res.data.data.dataList;
                this.pageDes = res.data.data.pageDes;

                setTimeout(() => {
                    var con = false;
                    this.prposTabelData.forEach((item, index) => {
                        if (item.lineNo == name) {
                            this.tableSelectRow = item;
                            this.$refs.AContentTableRef.setCurrentFn(item, index);
                            this.$refs.Dialog1Ref.GetLineIndexCondComboxApi(this.tableSelectRow);
                            con = true;
                        }
                    })
                    if (con) return
                    let temp = this.prposTabelData[0]
                    this.tableSelectRow = temp;
                    this.$refs.AContentTableRef.setCurrentFn(temp, 0);
                    this.$refs.Dialog1Ref.GetLineIndexCondComboxApi(temp);
                }, 500);
            }

            if (!this.$store.state.isCurrentNext && this.changePlantFlg) {
                this.changePlantFlg = false;
                this.$store.commit("changeIsCurrentFn", Fn);

                eventBus.$emit('saveFnDialog1Current_EventBus');
                return
            } else {
                Fn();
            }
            // this.$store.commit("changeIsCurrentFn", Fn);

            // eventBus.$emit('saveFnDialog1Current_EventBus');

        },
    },
    // 创建完毕状态(里面是操作)
    created() { },
    // 挂载结束状态(里面是操作)
    mounted() {
        (this.tableHeight = $(".View").height() - 190);

        this.getPlantApi(1, 1000, true);
    },
    // 销毁前状态(里面是操作)
    beforeDestroy() {

    },
};
</script>
<style lang="scss" scoped>
.View {
    width: calc(100% - 215px);
    height: 100%;
    margin-left: 24px;

    .bh-tab {
        width: 100%;

        ::v-deep .el-tabs__header {
            margin: 14px 24px 0 0;
            width: calc(100% -48px);
        }

        ::v-deep .el-tabs__content {
            height: calc(100% - 55px);
        }

        ::v-deep #pane-first {
            height: 100%;
        }

        ::v-deep #pane-second {
            height: 100%;
        }

        ::v-deep #pane-third {
            height: 100%;
        }
    }

    .all-content-warrper {
        width: 100%;
        height: calc(100% - 55px);

        .title-view {
            width: calc(100% - 24px);
            background: #f8f8f8;
            border-bottom: 1px solid #e1e1e1;

            .top-btn-view {
                height: 48px;
                display: flex;
                align-content: center;
                align-items: center;

                .bottom {
                    height: 48px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .bottom-left-view {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        height: 52px;
                    }

                    .b-input {
                        display: flex;
                        align-items: center;
                        height: 100%;
                        margin-right: 24px;

                        .b-input-label {
                            font-size: 14px;
                            color: rgba(0, 0, 0, 0.85);
                            height: 24px;
                            line-height: 24px;
                            font-family: HelveticaNeue;
                        }

                        .selectInput {
                            width: 210px;
                            height: 24px;
                        }

                        .selectInputlong {
                            width: 384px;
                            margin-left: 8px;

                            ::v-deep .el-input__inner {
                                width: 384px;
                            }
                        }

                        ::v-deep .el-input__inner {
                            height: 24px;
                            color: rgba(0, 0, 0, 0.65);
                            background: #f8f8f8;
                        }

                        ::v-deep .el-input__icon {
                            line-height: 24px;
                        }
                    }
                }
            }
        }
    }
}



.warp {
    height: 100%;
    width: calc(100% - 24px);

    .tips {

        ::v-deep .el-button.is-disabled,
        ::v-deep .el-button.is-disabled:hover {
            background: #ebeef5 !important;
            color: #c0c4cc !important;
        }

        padding-top: 16px;
        display: flex;
        align-items: center;
        margin-bottom: 16px;

        .form-ipt {
            width: 210px;
            height: 24px;

            ::v-deep .el-input__inner {
                height: 24px;
                background: #fff;
            }

            ::v-deep .el-input__icon {
                line-height: 24px;
            }
        }

        .refresh {
            min-width: 40px;
            height: 24px;
            border-radius: 4px;
            border: 1px solid #d9d9d9;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            .iconfont {
                margin: 0 4px;
                font-size: 17px;
                height: 24px;
                line-height: 24px;
            }
        }

        .el-button {
            height: 24px;
            line-height: 10px;
            // border: none;
        }
    }

    .table-view {
        width: 100%;
    }
}

.plan-c1 {
    position: fixed;
    width: 560px !important;
    height: calc(100% - 198px);
    background: #FFF;
    right: -560px;
    bottom: 0;
    z-index: 9999;
    transition: all 0.3s ease;
    border: 1px solid #C3C3C3;
}

.plan-c2 {
    position: fixed;
    width: 560px !important;
    height: calc(100% - 198px);
    background: #FFF;
    right: -560px;
    bottom: 0;
    z-index: 9999;
    transition: all 0.3s ease;
    border: 1px solid #C3C3C3;
}
</style>